<template>
  <van-popup
    v-model:show="props.userShow"
    round
    position="bottom"
    :style="{ height: '24%' }"
    @click="closeUser"
  >
    <div class="border" @click="showEdit = true">
      <div>
        <i class="iconfont icon-edit" style="color: #6ca4ea"></i
        ><span>修改信息</span>
      </div>
      <div @click="exitUser">
        <i class="iconfont icon-exit" style="color: orange"></i
        ><span>退出登录</span>
      </div>
      <div @click="logOut">
        <i class="iconfont icon-logout" style="color: orange"></i
        ><span>注销账号</span>
      </div>
    </div>
  </van-popup>
  <!-- 修改用户信息 -->
  <van-popup v-model:show="showEdit">
    <div class="edit-user">
      <div class="title">修改信息</div>
      <van-form @submit="onSubmit" @failed="onFailed">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div class="btn-user">
          <van-button round block @click="showEdit = false"> 取消 </van-button>
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </van-popup>
</template>
<script setup>
import { useUserMsg } from "./hooks/useUserMsg"
const { exitUser, logOut, showEdit, username, password, onSubmit, onFailed } =
  useUserMsg()
const props = defineProps(["userShow"])
const emit = defineEmits(["close-user"])
function closeUser() {
  emit("close-user")
}
</script>
<style lang="stylus" scoped>
@import 'http://at.alicdn.com/t/c/font_3789446_cash750dlhl.css'
.border
  width 100%
  text-align center
  font-size 20px
  color #333
  margin 25px auto
  div
    padding 0 0 10px 0
    &:hover
      background-color #eee
  .iconfont
    font-size 20px
    padding-right 15px
.edit-user
  width 300px
  .title
    font-size 20px
    text-align center
    margin 10px
  .btn-user
    display flex
    margin 40px
    justify-content space-between
    // background-color red
    .van-button
      width 100px
</style>
